<!--
 * @Description: table
 * @Author: rendc
 * @Date: 2022-09-15 09:24:45
 * @LastEditors: rendc
 * @LastEditTime: 2022-09-16 09:10:20
-->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>table</title>
</head>
<body>
  <!-- 表格 -->
  <h5>表格</h5>
  <table border="1" cellpadding="0px" cellspacing="0px">
    <thead bgcolor="skyblue">
      <tr align="center">
        <th width="60px">姓名</th>
        <th width="60px">性别</th>
        <th width="60px">年龄</th>
      </tr>
    </thead>
    <tbody bgcolor="hotpink" align="center">
      <tr >
        <td>张三</td>
        <td>男</td>
        <td>30岁</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>男</td>
        <td>32岁</td>
      </tr>
    </tbody>
  </table>
  <h5>表格-垂直表头</h5>
  <table border="1"  cellpadding="0px" cellspacing="0px">
    <tr >
      <th bgcolor="#3ECBF9" width="60px">姓名</th>
      <td bgcolor="#31DBD9" width="60px">张三</td>
      <td bgcolor="#31DBD9" width="60px">李四</td>
    </tr>
    <tr>
      <th bgcolor="#3ECBF9">性别</th>
      <td bgcolor="#31DBD9">男</td>
      <td bgcolor="#31DBD9">男</td>
    </tr>
    <tr>
      <th bgcolor="#3ECBF9">年龄</th>
      <td bgcolor="#31DBD9">28</td>
      <td bgcolor="#31DBD9">30</td>
    </tr>
  </table>
  <h5>表格-带标题</h5>
  <table border="1"  cellpadding="0px" cellspacing="0px">
    <caption>人员信息表</caption>
    <thead bgcolor="#49F2BF">
      <tr align="center">
        <th width="60px">姓名</th>
        <th width="60px">性别</th>
        <th width="60px">年龄</th>
      </tr>
    </thead>
    <tbody bgcolor="#D3DB37" align="center">
      <tr >
        <td>张三</td>
        <td>男</td>
        <td>30岁</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>男</td>
        <td>32岁</td>
      </tr>
    </tbody>
  </table>
  <h5>表格-背景图片</h5>
  <table border="1" background="./color.png" style="background-size:188px 120px;" cellpadding="0px" cellspacing="0px">
    <caption>人员信息表</caption>
    <thead >
      <tr align="center">
        <th width="60px">姓名</th>
        <th width="60px">性别</th>
        <th width="60px">年龄</th>
      </tr>
    </thead>
    <tbody  align="center">
      <tr >
        <td>张三</td>
        <td>男</td>
        <td>30岁</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>男</td>
        <td>32岁</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>男</td>
        <td>32岁</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>男</td>
        <td>32岁</td>
      </tr>
    </tbody>
  </table>
  <h5>表格-合并单元格</h5>
  <table border="1" cellpadding="0px" cellspacing="0px">
    <caption>人员信息表</caption>
    <thead >
      <tr align="center">
        <th width="60px">姓名</th>
        <th width="60px">性别</th>
        <th width="60px">年龄</th>
        <th colspan="2">联系方式</th>
        <!-- <th width="120">联系方式</th> -->
      </tr>
    </thead>
    <tbody align="center">
      <tr >
        <td>张三</td>
        <td>男</td>
        <td>30岁</td>
        <td width="120px">13012341235</td>
        <td width="120px">13112341236</td>
      </tr>
      <tr>
        <td rowspan="2">李四</td>
        <td rowspan="2">男</td>
        <td rowspan="2">32岁</td>
        <td>13212341237</td>
        <td>13312341238</td></tr>
      <tr>
        <!-- <td>李四</td> -->
        <!-- <td>男</td> -->
        <!-- <td>32岁</td> -->
        <td>13512341239</td>
        <td>13612341230</td></tr>
    </tbody>
  </table>
  <h5>表格-tfoot</h5>
  <table border="1" cellpadding="0px" cellspacing="0px">
    <caption>人员信息表</caption>
    <thead >
      <tr align="center">
        <th width="60px">姓名</th>
        <th width="60px">性别</th>
        <th width="60px">年龄</th>
        <th colspan="2">联系方式</th>
        <!-- <th width="120">联系方式</th> -->
      </tr>
    </thead>
    <tbody align="center">
      <tr >
        <td>张三</td>
        <td>男</td>
        <td>30岁</td>
        <td width="120px">13012341235</td>
        <td width="120px">13112341236</td>
      </tr>
      <tr>
        <td rowspan="2">李四</td>
        <td rowspan="2">男</td>
        <td rowspan="2">32岁</td>
        <td>13212341237</td>
        <td>13312341238</td></tr>
      <tr>
        <!-- <td>李四</td> -->
        <!-- <td>男</td> -->
        <!-- <td>32岁</td> -->
        <td>13512341239</td>
        <td>13612341230</td></tr>
    </tbody>
    <tfoot>
      <th colspan="4">共计</th>
      <!-- <th></th> -->
      <!-- <th></th> -->
      <!-- <th></th> -->
      <th>2人</th>
    </tfoot>
  </table>
</body>
</html>